import styled from 'styled-components'
import style,{px2rem} from '@/assets/global-style'

export const GoodStuffWrapper = styled.div`
    /* padding-top: 80px; */
    .navbar {
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        i {
            font-size: 24px;
        }
    }
    .tabsContainer {
        position: fixed;
        top: 44px;
        background-color: #fff;
        width: 100%;
        z-index: 999;
        .tabs {
            --active-line-color: #10cce5;
            --active-title-color: #000;
            --title-font-size: 14px;
            --active-line-height: 3px;
        }
        .adm-tabs-tab-active {
            transform: scale(1.3);
        }
    }
    .spinloading {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }
    .downloading {
        text-align: center;
        font-size: 14px;
        color: #000;
        height: 30px;
    }
    .adm-pull-to-refresh-head-content {
        font-size: 13px;
        color: ${style["theme_color"]};
    }
    .share {
        position: fixed;
        bottom: 10px;
    }
    .card {
        margin: 12px 15px;
        background-color: #fff;
        padding: 17px 0 20px 12px;
        border-radius: 12px;
        .card-header {
            display: flex;
            /* margin-left: 10px; */
            /* justify-content: space-between; */
            margin-right: 14px;
            .photo {
                width: 40px;
                height: 40px;
                border-radius: 40px;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            .message {
                width: 220px;
                padding-top: 8px;
                margin-left: 10px;
                font-size: 15px;
                color: #212121;
                span {
                    font-size: 12px;
                    color: #9e9e9e;
                }
            }
            .right {
                width: 62px;
                height: 20px;
                font-size: 12px;
                line-height: 20px;
                text-align: center;
                border-radius: 20px;
                border: .5px solid #ff7800;
                color: #ff7800;
                margin-top: 10px;
            }
        }
        .description {
            font-size: 15px;
            color: #212121;
            line-height: 21px;
            margin: 10px 0;
            /* 超出5行省略 */
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            img {
                width: 100%;
            }
        }
        .imglist {
            margin-top: ${px2rem(10)};
            img {
                width: 108px;
                height: 108px;
                margin: 0 5px 2.5px 0;
                object-fit: cover;
                border-radius: ${px2rem(5)};
            }
        }
        .product {
            margin: 16px 0;
            display: flex;
            width: 240px;
            border-radius: 6px;
            overflow: hidden;
            background: #f2f3f4;
            img {
                width: 50px;
                height: 50px;
                object-fit: cover;
            }
            .desc {
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                h2 {
                    margin-left: 10px;
                    font-size: 14px;
                    color: #616161;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .price {
                    color: #ff7800;
                    font-size: 9px;
                    transform: scale(0.9);
                    span {
                        line-height: 16px;
                        font-size: 14px;
                        color: #ff7800;
                        font-weight: 700;
                    }
                }
            }
            i {
                margin: auto 4px;
                font-size: 16px;
                color: #919191;
                margin-left: 12px;
            }
        }
        .card-footer {
            display: flex;
            justify-content: space-between;
            margin-right: 12px;
            margin-top: 20px;
            .read-count {
                font-size: 12px;
                color: #919191;
                line-height: 16px;
            }
            .icon-btn {
                display: flex;
                font-size: 12px;
                width: ${px2rem(120)};
                justify-content: space-around;
                span {
                    margin-left: 4px;
                }
            }
        }
    }
`